<template>
    <div id="home">
        <div id="left">
            <el-row class="tac">
                <el-col :span="12">
                  <el-menu
                        default-active="1"
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                    >
                        <el-submenu index="2" class="el-submenu">
                            <template slot="title">
                              
                                <span>首页</span>
                            </template>
                        </el-submenu>
                    </el-menu>
                    <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                    >
                        <el-submenu index="1" class="el-submenu">
                            <template slot="title">
                             
                                <span>产品管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1">定期管理</el-menu-item>
                                <el-menu-item index="1-2">活期管理</el-menu-item>
                                <el-menu-item index="1-3">黄金管理</el-menu-item>
                                <el-menu-item index="1-4">基金管理</el-menu-item>
                                <el-menu-item index="1-5">银行管理</el-menu-item>
                                <el-menu-item index="1-6">基金经理管理</el-menu-item>
                                <el-menu-item index="1-7">在线人数</el-menu-item>
                            </el-menu-item-group>
                            
                           
                        </el-submenu>
                    </el-menu>
                    <el-menu
                        default-active="3"
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                    >
                        <el-submenu index="3" class="el-submenu">
                            <template slot="title">
                      
                                <span>设置</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="3-1">员工管理</el-menu-item>
                                <el-menu-item index="3-2">角色管理</el-menu-item>
                                <el-menu-item index="3-3">APPcode值修改</el-menu-item>
                                <el-menu-item index="3-4">优惠券管理</el-menu-item>
                            </el-menu-item-group>
                            
                           
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-row>      
        </div>
        <div id="right">
             <div id="nav">
            <img src="../../assets/images/type.png" alt="" class="nav-img" />
            <el-breadcrumb separator="/" class="el-breadcrumb">
                <el-breadcrumb-item :to="{ path: '/' }"
                    >首页</el-breadcrumb-item
                >
                <el-breadcrumb-item><a href="#">设置</a></el-breadcrumb-item>
                <el-breadcrumb-item>黄金回收站</el-breadcrumb-item>
            </el-breadcrumb>
            <el-dropdown class="el-dropdown">
                <span class="el-dropdown-link">
                    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>主页</el-dropdown-item>
                    <el-dropdown-item>登出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
            <main>
                <router-view></router-view>
            </main>
        </div>
    </div>
</template>

<script>
// @ is an alias to /src

export default {
    data() {
        return {
            activeNames: [],
        };
    },
    methods: {
        handleChange(val) {
            console.log(val);
        },
    },
};
</script>
<style scoped lang="scss">
#home{
    display: flex;
}
#left {
    height: 100vh;
    width: 204px;
    background-color: rgb(67, 74, 80);
    box-sizing: border-box;
    .tac {
        height: 100%;
        width: 409px;
    }
}

#right{
    width: 1526px;
    box-sizing: border-box;
    #nav {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid rgb(182, 181, 181);
    display: flex;
    position: relative;
    align-items: center;
    .el-breadcrumb {
        margin-left: 30px;
    }
    .el-dropdown {
        position: absolute;
        right: 10px;
    }
    .nav-img {
        width: 30px;
        height: 30px;
        margin-left: 10px;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409eff;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
}
}

</style>
